import React, { memo } from "react";
import {useDispatch} from 'react-redux'
import "./index.scss";

import { getSizeImage } from '@/utils/format-utils';
import play from 'store/action/play'

export default memo(function WYTopRanking(props) {
  //   props and state
  const {info} = props 
  const {coverImgUrl,name,tracks = []} = info


  // redux hooks
  const dispatch = useDispatch()


  // 其它逻辑 
  const addPlay = ({id})=> {
    dispatch(play.getSongDetail(id))
  }


  return (
    <div className="top-ranking">
      <div className="r-header">
        <div className="image">
          <img
            src={getSizeImage(coverImgUrl)}
            alt=""
          />
          <a href="/todo" className="image_cover"> </a>
        </div>

        <div className="info">
          <a href="/todo">{name}</a>
          <div>
            <button className="btn play sprite_02"></button>
            <button className="btn favor sprite_02"></button>
          </div>
        </div>
      </div>

      <div className="r-list">
        {tracks.slice(0,10).map((item,index)=>(
        <div className="list-item" key={item.id}>
          <div className="rank">{index + 1}</div>
          <div className="info">
            <span className="name text-nowrap">{item.name}</span>
            <div className="operate">
              <button className="btn sprite_02 play" onClick={e=>addPlay(item)}></button>
              <button className="btn sprite_icon2 addto"></button>
              <button className="btn sprite_02 favor"></button>
            </div>
          </div>
        </div>
        ))}

      </div>
      <div className="r-footer">
        <a href="/todo">查看全部 &gt;</a>
      </div>
    </div>
  );
});
